<template>
	<view class="content">
		<uni-nav-bar
			background-color="#efefef" 
			color="#5287b1" 
			title="投递树洞"
			left-icon="left"
			@clickLeft="back()"
			height="6vh"
		></uni-nav-bar>
		<div class="remind">
			<rich-text :nodes="remindContent">
			</rich-text>
		</div>
		
		<div class="tag">
			<text class="selectTag">选择标签</text>
			<view class="example-body">
				
				<div class="tag-view">
					<uni-tag :inverted="inverteds.invertedZero" text="日常" type="primary" @click="selectTag(0)"/>
				</div>
				
				<div class="tag-view">
					<uni-tag :inverted="inverteds.invertedOne" text="情感" type="success" @click="selectTag(1)"/>
				</div>
				
				<div class="tag-view">
					<uni-tag :inverted="inverteds.invertedTwo" text="烦恼" type="warning" @click="selectTag(2)"/>
				</div>
				
				<div class="tag-view">
					<uni-tag :inverted="inverteds.invertedThree" text="吐槽" type="error" @click="selectTag(3)"/>
				</div>
				
				<div class="tag-view">
					<uni-tag :inverted="inverteds.invertedFour" text="其他" @click="selectTag(4)"/>
				</div>
			</view>
			<button type="primary" :disabled="isSelect" @click="toDeliver">投递</button>
		</div>
		
		<view class="deliverPopup">
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" >
				<view class="one popup-content">你确定要投递这篇日记吗？</view>
				<view class="two popup-content" @click="deliver">确定</view>
				<view class="three popup-content" @click="cancel">取消</view>
			</uni-popup>
		</view>
		<!-- 添加提示框 -->
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog 
					type="success" 
					cancelText="关闭" 
					confirmText="同意" 
					title="通知" 
					:content="popMsg" 
					>
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {deliverTreeHold} from '@/api/treeHole.js';
	export default {
		data() {
			return {
				remindContent:`
					<div style="padding:1vh;">
						<h3>关于投入到树洞的内容</h3>
						<div style="margin-top:2vh;font-size:1.5vh;font-weight: bold;"><span >第一,「树洞」中的内容会被所有用户看到。切勿投递任何隐私。</span></div>
						<div style="margin-top:2vh;font-size:1.5vh;font-weight: bold;"><span>第二，任何有违法律，道德，对他人造成不适的内容会被删除，并依程度受到惩罚。</span></br></div>
						<div style="margin-top:2vh;font-size:1.5vh;font-weight: bold;"><span>第三，如果你的树洞投递中可能会有消极的内容，请添加「烦恼」的标签。
						以便提前通知别人，选择是否打开。</span></div>
					</div>
				`,
				inverteds:{
					invertedZero:true,
					invertedOne:true,
					invertedTwo:true,
					invertedThree:true,
					invertedFour:true,
				},
				tag:"",
				journalId:"",
				isSelect:true,
				content:"",
				number:"",
				authorId:"",
				token:"",
				title:"",
				popMsg:""
			};
		},
		onLoad(e) {
			this.getMessage()
			this.content = e.content
			this.journalId = e.journalId
			this.number = e.number
			this.title = e.title
		},
		methods:{
			//投递的方法
			deliver(){
				deliverTreeHold({
					"content":this.content,
					"authorId":this.authorId,
					"number":this.number,
					"title":this.title,
					"tag":this.tag,
					"token":this.token
				}).then(res=>{
					if(res.data.data==1){
						this.popMsg = "投递成功"
						this.$refs.alertDialog.open()
					}else if(res.data.data == 0){
						this.popMsg = "您已经投递过这篇了~"
						this.$refs.alertDialog.open()
					}
				})
			},
			getMessage(){
				this.authorId=uni.getStorageSync("id"),
				this.token=uni.getStorageSync("authorization")
			},
			toDeliver(){
				this.toggle()
			},
			toggle() {
			  	this.$refs.popup.open("bottom")
			},
			cancel(){
				this.$refs.popup.close()
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			selectTag(e){
				Object.keys(this.inverteds).forEach(key => {  
				  this.inverteds[key] = true;  
				});
				this.isSelect = false
				if(e==0){
					this.inverteds.invertedZero = false;
					this.tag = "日常"
				}else if(e ==1){
					this.inverteds.invertedOne = false;
					this.tag = "情感"
				}else if(e ==2){
					this.inverteds.invertedTwo = false;
					this.tag = "烦恼"
				}else if(e ==3){
					this.inverteds.invertedThree = false;
					this.tag = "吐槽"
				}else if(e ==4){
					this.inverteds.invertedFour = false;
					this.tag = "其他"
				}
				
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: $bg-gary;
}
.content{
	.remind{
		width: 90%;
		height: 25vh;
		background-color: white;
		margin: auto;
		margin-top: 1.3vh;
		border-radius: 1vh;
		
	}
	.tag{
		padding-top: 1vh;
		padding-left: 2vh;
		font-size: 2.4vh;
		color: $font-gray;
		width: 85%;
		height: 20vh;
		margin: auto;
		.example-body{
			display: flex;
			justify-content:space-between;
			margin-top: 1vh;
			.tag-view{
				flex: 1;
				
			}
		}
		button{
			margin-top: 3vh;
		}
	}
	.deliverPopup{
		text-align: center;
		.popup-content{
			width: 100%;
			height: 5vh;
			line-height: 5vh;
		}
		.one{
			height: 4vh;
			line-height: 4vh;
			font-size: 1.5vh;
			border-bottom: 1rpx gray solid;
		}
		.two{
			height: 6vh;
			line-height: 6vh;
			color: $bg-blue;
			border-bottom: 1.2vh gainsboro solid;
			font-size: 2vh;
		}
		.three:active{
			background-color: $bg-gary;
		}
		.two:active{
			background-color: $bg-gary;
		}
	}
	
}
</style>
